<template>
	<div>
		<div class="topview">
			<b>返回顶部</b>
			<Select v-model="model1" style="width:80px;" class="selector">
				<Option
					v-for="item in cityList"
					:value="item.value"
					:key="item.value"
					class="selector"
					>{{ item.label }}</Option
				>
			</Select>
			<b>in</b>
			<Select v-model="model2" style="width:80px;" class="selector">
				<Option
					v-for="item in days"
					:value="item.value"
					:key="item.value"
					class="selector"
					>{{ item.label }}</Option
				>
			</Select>
		</div>
		<div style="overflow:scroll;" class="items">
			<MainItem v-for="item in 19" :key="item"></MainItem>
		</div>

		<div class="bottomView">
			Terms Privacy Policy 中文
			<br />
			Rarible, Inc
		</div>
	</div>
</template>

<script>
import MainItem from './MainItem.vue';
export default {
	components: {
		MainItem,
	},
	data() {
		return {
			cityList: [
				{
					value: '买家',
					label: '买家',
				},
				{
					value: '卖家',
					label: '卖家',
				},
			],
			days: [
				{
					value: '1天',
					label: '1天',
				},
				{
					value: '2天',
					label: '2天',
				},
			],
			model1: '买家',
			model2: '1天',
		};
	},
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.selector {
	border: none;
}

::v-deep.ivu-select-selection {
	border: none !important;
}
.items {
	height: 600px;
	margin-top: 20px;
}
.bottomView {
	display: flex;
	justify-content: space-around;
	width: 260px;
	height: 180px;

	padding: 20px;

	z-index: 99999;
}

.topview {
	display: flex;
	justify-content: space-around;
	align-items: center;
	margin-top: 20px;
}
</style>
